<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<% pageContext.setAttribute("year", new org.joda.time.DateTime().getYear());%>

<tiles:insertTemplate template="/WEB-INF/template/template000.jsp" flush="true" >

<tiles:putAttribute name="title" cascade="true">Portfull</tiles:putAttribute>
<tiles:putAttribute name="keywords" cascade="true">dinheiro, publicidade</tiles:putAttribute>
<tiles:putAttribute name="description" cascade="true">Faça dinheiro com eficácia</tiles:putAttribute>

<tiles:putAttribute name="css_extension" cascade="true">
    
</tiles:putAttribute>
<tiles:putAttribute name="js_extension" cascade="true">
    <script charset="utf-8" type="text/javascript">
    //<![CDATA[
/*        var viewModel = {
            vitrina: {
                prateleira1: [
                    {id: '1_0', hint: '1_0', url: '1_0'},
                    {id: '1_1', hint: '1_1', url: '1_1'},
                    {id: '1_2', hint: '1_2', url: '1_2'}
                ],
                prateleira2: [
                    {id: '2_0', hint: '2_0', url: '2_0'},
                    {id: '2_1', hint: '2_1', url: '2_1'},
                    {id: '2_2', hint: '2_2', url: '2_2'}
                ],
                prateleira3: [
                    {id: ko.observable('3_0'), hint: ko.observable('3_0'), url: ko.observable('3_0')},
                    {id: ko.observable('3_1'), hint: ko.observable('3_1'), url: ko.observable('3_1')},
                    {id: ko.observable('3_2'), hint: ko.observable('3_2'), url: ko.observable('3_2')}
                ]
            },
            reload: function() {
                $.ajax({
                    url: "<c:url value='/vitrina/prateleira/3' />",
                    dataType:"json",
                    type:"GET",
                    data: [],
                    success: function(data, textStatus, jqXHR){
                        console.log(data);
                        viewModel.vitrina.prateleira3[0].id(data[0].id);
                        viewModel.vitrina.prateleira3[0].hint(data[0].hint);
                        viewModel.vitrina.prateleira3[0].url(data[0].url);
                    }
                });
            }
        }
        var viewModel = null;
        $.ajax({
                url: "<c:url value='/vitrina/teste' />",
                dataType:"json",
                type:"GET",
                data: [],
                success: function(data, textStatus, jqXHR){
                    console.debug(data);
                    console.debug(data.vitrinaDTO);
                    console.debug(data.vitrinaDTO.tipo);
                    console.debug('P1');
                    console.debug(data.vitrinaDTO.prateleira1);
                    console.debug(data.vitrinaDTO.prateleira1[0]);
                    console.debug(data.vitrinaDTO.prateleira1[1]);
                    console.debug(data.vitrinaDTO.prateleira1[2]);
                    console.debug('P2');
                    console.debug(data.vitrinaDTO.prateleira2);
                    console.debug(data.vitrinaDTO.prateleira2[0]);
                    console.debug(data.vitrinaDTO.prateleira2[1]);
                    console.debug(data.vitrinaDTO.prateleira2[2]);
                    console.debug('P3');
                    console.debug(data.vitrinaDTO.prateleira3);
                    console.debug(data.vitrinaDTO.prateleira3[0]);
                    console.debug(data.vitrinaDTO.prateleira3[1]);
                    console.debug(data.vitrinaDTO.prateleira3[2]);
                    console.debug('PH');
                    console.debug(data.vitrinaDTO.prateleiraHalf);
                    console.debug('PF');
                    console.debug(data.vitrinaDTO.prateleiraFull);                    
                    viewModel = ko.mapping.fromJS(data);
                    //ko.mapping.fromJS(data, viewModel);
                    ko.applyBindings(viewModel);
                }
         });
         */
        
    //]]>
    </script>
</tiles:putAttribute>

<tiles:putAttribute name="content" cascade="true">
    <script type="text/html" id="vitrina_home">
        <ul id="ul_prateleira3" >
            {{each(index, portlet) vitrinaDTO.prateleira3()}}
            <li id="port_3_\${index+1}" class="portlets">
                <span>\${portlet.id}</span><br>
                <span>\${portlet.hint}</span><br>
                <img src="\${portlet.url}"/><br>
            </li>
            {{/each}}
        </ul>
    </script>
    <section> 
        <div id="video"></div>        
        <div id="vitrina_home" data-bind="template: 'vitrina_home'">
            
            <%--
            <ul id="port_home"> 

                <li id="h_port_1">
                    <!--
                    <span data-bind="text: vitrina.prateleira3[0].id"></span><br>
                    <span data-bind="text: vitrina.prateleira3[0].hint"></span><br>
                    <img data-bind="attr: {src: vitrina.prateleira3[0].url}"/>
               
                </li>
                <li id="h_port_2">
                    <!--
                    <span data-bind="text: vitrina.prateleira3[1].id"></span><br>
                    <span data-bind="text: vitrina.prateleira3[1].hint"></span><br>
                    <img data-bind="attr: {src: vitrina.prateleira3[1].url}"/>
               
                </li>
                <li id="h_port_3">
                    <span data-bind="text: vitrinaDTO.prateleira3()[2].id"></span><br>
                    <span data-bind="text: vitrinaDTO.prateleira3()[2].hint"></span><br>
                    <img data-bind="attr: {src: vitrinaDTO.prateleira3()[2].url}"/>
                </li>

            </ul>
            --%>
        </div>
    </section>
    <%--<label>Prateleira3_0_Id:<input type="text" data-bind="value: vitrina.prateleira3[0].id" /></label><br>--%>
    <!-- <button data-bind="click: reload">Reload</button> -->
</tiles:putAttribute>

</tiles:insertTemplate>
